<!-- <template>
  <van-nav-bar title="详情页" left-text="返回" left-arrow @click="$router.back()" />


  <img :src="productObj.coverImage" alt="" />
  <h5>名称：{{ productObj.name }}</h5>
  <p>价格：{{ productObj.price }}</p>

  <van-action-bar>
    <van-action-bar-icon icon="cart-o" text="购物车" />
    <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" @click="cartAdd" />
    <van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
  </van-action-bar>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import { productDetail, productTalk } from '@/api/product'
import { showConfirmDialog, showSuccessToast } from 'vant'
import { cartAddReg } from '@/api/cart'

let route = useRoute()
let router = useRouter()

let productObj = ref({})
let talkList = ref([])

console.log(route.query.id)

productDetail(route.query.id).then((r) => {
  console.log(r.data.data)
  productObj.value = r.data.data
})

productTalk(route.query.id).then((r) => {
  console.log(r.data.data)
  talkList.value = r.data.data
})

async function cartAdd() {
  // let token = localStorage.getItem('token')
  if (localStorage.getItem('token') == null) {
    showConfirmDialog({
      title: '提示',
      message: '请先登录',
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {
        // 可以添加取消操作的处理逻辑
      })
  } else {
    // 获取整个产品对象而不是仅仅ID
    let product = productObj.value
    let price = product.price
    let amount = 1
    let r = await cartAddReg(product.id, price, amount)
    console.log(r.data.data)
    showSuccessToast('添加成功')
  }
}
</script>

<style scoped>
img {
  width: 100%;
}
</style> -->
<template>
  <van-nav-bar title="商品详情" left-text="返回" left-arrow @click="$router.back()" />

  <div class="detail">
    <div class="detailTop">
      <!-- <van-swipe class="my-swipe" :autoplay="3000" lazy-render :show-indicators="isshow">
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe> -->
      <img :src="goodsDetail.imgUrl" alt="" />

      <div class="detailPrice">
        <div class="price">
          <div class="priceFu">￥</div>
          <div class="pricePr">{{ goodsDetail.price }}</div>
          <div class="priceYh">优惠价</div>
        </div>
        <div class="sales">已售{{ goodsDetail.num }}</div>
      </div>
      <div class="detailName">{{ goodsDetail.name }}</div>
    </div>
    <div class="detailFoot">
      <!-- <div class="item add">加入购物车</div>
      <div class="item buy">立即购买</div> -->
      <van-action-bar>
        <van-action-bar-icon icon="cart-o" text="购物车" />
        <van-action-bar-button type="warning" text="加入购物车" class="item add" />
        <van-action-bar-button type="danger" text="立即购买" class="item buy" />
      </van-action-bar>
    </div>
  </div>
 
</template>

<script setup>
import { ref, onMounted, onActivated } from 'vue'
let isshow = ref(true)
let images = ref([
  'https://img0.baidu.com/it/u=350417381,1197904111&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
  'https://img2.baidu.com/it/u=1149909134,872848958&fm=253&fmt=auto&app=138&f=JPEG?w=730&h=500',
  'https://img2.baidu.com/it/u=4208176124,120806039&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500',
  'https://img2.baidu.com/it/u=1852472504,1840881402&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
  'https://img1.baidu.com/it/u=3458598981,1373738271&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
  'https://img2.baidu.com/it/u=176441448,1751492499&fm=253&fmt=auto&app=138&f=JPEG?w=526&h=350',
])
import { useRoute } from 'vue-router'
import http from '@/utils/request.js'

let route = useRoute()
let goodsDetail = ref({})
let id = ref(0)
onMounted(() => {
  goData()
})
const goData = async () => {
  let goodsId = ref(route.query.id)

  console.log(route.query.id)
  let res = await http.$axios({
    url: '/api/goods/id',
    params: {
      id: goodsId.value,
    },
  })
  console.log(res)
  goodsDetail.value = res
}

onActivated(() => {
  //判断当前url里的id和之前的id是否一致
  if (route.query.id !== id.value) {
    goData()
    id.value = route.query.id
  }
})


</script>

<style scoped>
.detail {
  background-color: #fff;
}
.detailTop {
  margin-bottom: 3rem;
}
.detail .detailTop .my-swipe .van-swipe-item {
  width: 100%;
  height: 10.375rem;
  text-align: center;
}
.detail .detailTop img {
  width: 100%;
}
.detail .detailTop .detailPrice {
  width: 100%;
  /* background-color: red; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6375rem 0.325rem 0.325rem 0.325rem;
  box-sizing: border-box;
}

.detail .detailTop .detailPrice .price {
  display: flex;
  align-items: center;
}

.detail .detailTop .detailPrice .price .priceFu {
  font-size: 0.6rem;
}

.detail .detailTop .detailPrice .price .pricePr {
  font-weight: 600;
}

.detail .detailTop .detailPrice .price .priceYh {
  font-size: 0.3125rem;
  margin-left: 0.1875rem;
  background-color: rgb(255, 236, 239);
  color: rgb(255, 68, 102);
  padding: 0.0625rem 0.0625rem;
}

.detail .detailTop .detailPrice .sales {
  font-size: 0.375rem;
  color: #666;
}

.detail .detailTop .detailName {
  padding: 0rem 0.325rem 0.325rem 0.325rem;
  font-size: 0.5rem;
}

.detail .detailFoot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  /* background-color: red; */
}

.detail .detailFoot .item {
  width: 50%;
  text-align: center;
  line-height: 1rem;
  height: 100%;
  font-size: 0.4375rem;
}

/* .detail .detailFoot .add {
        background-color: rgb(255, 236, 239);
        color: rgb(255, 68, 102);
    }
 
    .detail .detailFoot .buy {
        background-color: rgb(255, 87, 119);
        color: rgb(255, 255, 255);
    } */
</style>
